import React from 'react'
import {View, Image, ScrollView } from 'react-native'
import { Dialog, Lt, Color, Label, Images, ImagePt, Touch, Jpp, Jx, Navigator, Flist } from "../_utils"
import { Net, NET_GET, NET_NR } from "../_net"
import { eApp, cHome} from "./_home"
import { ViewScale } from "../_util"
import { TouchGoodsHotCake } from './Goods';

class TouchMajor extends React.PureComponent{
    render(){
        let {style, source, title, desc, ...other} = this.props;
        return <Touch style={style} {...other}>
            <View>
                <Image source = {source}/>
                <View style = {{position:"absolute"}}>
                    <Label style = {{marginLeft:10,marginTop:Jx.toVertical(15), fontSize:Lt.c16, color:"white"}}>{title}</Label>
                    <Label style = {{marginLeft:10,marginTop:Jx.toVertical(5), fontSize:Lt.c12, color:"#FDFDFD"}}>{desc}</Label>
                </View>
            </View>
        </Touch>
    }
}
const majorInv = Lt.margin;
const c_images = [Images.taoqianghou, Images.juhuasuan, Images.baoyou99, Images.shenghuojiaju];
const c_styles = [{}, {marginLeft:majorInv}, {marginTop:majorInv}, {marginLeft:majorInv, marginTop:majorInv}];
// 首页 大牌好券
export class ViewMajors extends React.PureComponent{
    constructor(props){
        super(props);
        this.state = {
            // 上百券 生活家居 淘抢购
            majorTitles:["上百券", "聚划算", "9.9包邮", "生活家居",],
            // 大礼包特惠 实惠日用抢不停 全网秒杀,超值省钱
            majorDescs:["大礼包特惠", "至潮尖货等你来", "超值低价,极速秒到", "实惠日用抢不停",],
        };
    }
    onMajor(idx, title){
        // 1 聚划算 2 淘抢购(上百券) 3生活家居 4 9.9包邮 
        Navigator.push("Major", {opt:idx+1, title})
    }
    render(){
        return <ViewScale
            style = {{marginHorizontal:Lt.margin, flexDirection:"row", flexWrap:"wrap"}}
            ipt = {{w:ImagePt.baoyou99.w * 2 + majorInv, h:ImagePt.baoyou99.h * 2 + majorInv}}
        >
        {
            this.state.majorTitles.map((v,i)=>{
                return <TouchMajor
                    key={i}
                    style={c_styles[i]}
                    title = {v}
                    desc = {this.state.majorDescs[i]} 
                    onPress = {this.onMajor.bind(this, i, v)} 
                    source = {c_images[i]} 
                />
            })
        }
        </ViewScale>
    }
}
// 首页 爆款宝贝
export class ViewHotCakes extends React.PureComponent{
    constructor(props){
        super(props);
        this.onLoad = this.onLoad.bind(this);
        this.onItem = this.onItem.bind(this);
    }
    onLoad(params){
        if(params.page > 0){
            params.add()
            return;
        }
        Net.request("taobao/opt?opt=5&"+params.pageStr, null, {NET_GET, NET_NR, params}).then(r=>{
            if(r.data){
                params.add(r.data.data);
            }else{
                params.add();
            }
        })
    }

    onItem(params){
        const index = params.index;
        const item = params.item;
        const newData = cHome.toData(item, eApp.rdxs[eApp.HOME]);
        return <TouchGoodsHotCake
            style = {{width:320, marginHorizontal:5}}
            wh={135}
            data={newData}
        />;
    }
    render(){
        return <Flist 
            style = {{width:Jpp.width, paddingHorizontal:Lt.pad}} 
            showsHorizontalScrollIndicator = {false}
            horizontal = {true}
            countpp = {2}
            onLoad = {this.onLoad}
            onItem = {this.onItem}
            endStr={""}
        />
    }
}